<template>
  <el-dialog
    :title="formDate.id?'编辑分类':'添加分类'"
    :visible="dialogVisible"
    width="40%"
    @close="close"
  >
    <!-- 表单 -->
    <el-form
      ref="form"
      label-width="80px"
      :model="formDate"
      :rules="rules"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="formDate.title" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formDate.desc"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="封面" prop="image">
        <el-input
          v-model="formDate.image"
          placeholder="强制设置图片跳过上传"
          style="margin-bottom:10px"
        />
        <!-- 图片上传组件 -->
        <UploadImages
          ref="UploadImages"
          @upImg="upImg"
          @remove="remove"
        />
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <template #footer>
      <el-button size="small" type="primary" @click="addFn">确定</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import UploadImages from './UploadImages.vue'
import { addAclassify, editAclassifyByid } from '@/api/classify'
export default {
  components: {
    UploadImages
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formDate: {
        title: '',
        desc: '',
        image: ''
      },
      rules: {
        title: [

          { required: true, message: '请输入标题', trigger: 'blur' }

        ],
        desc: [

          { required: true, message: '请输入描述', trigger: 'blur' }

        ],
        image: [
          { required: true, message: '请输入图片地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    image() {
      return this.formDate.image
    }
  },
  watch: {
    image(newval) {
      this.$refs.UploadImages.imgurl = newval
    }
  },
  methods: {
    // 清空图片输入框
    remove() {
      this.formDate.image = ''
    },
    // 图片回显
    imges1(url) {
      this.$refs.UploadImages.imgurl = url
    },
    // 显示地址
    upImg(img) {
      this.formDate.image = img
    },
    // 添加、编辑提交功能
    async addFn() {
      if (this.$refs.UploadImages.perisho) {
        this.$message({
          message: '警告哦，图片还为上传成功',
          type: 'warning'
        })
        return
      }
      // 表单验证
      await this.$refs.form.validate()
      // 判断
      if (this.formDate.id) {
        // 编辑
        await editAclassifyByid(this.formDate)
        // 通知父组件获取最新数据
        this.$emit('getnewList')
      } else {
        // 点击提交添加时
        await addAclassify(this.formDate)
        if (this.tableData.length === 3) {
          // 通知父组件获取下一页数据
          this.$emit('upmax')
        } else {
          // 通知父组件获取最新数据
          this.$emit('getnewList')
        }
      }
      // 关闭弹窗
      this.close()
      // 提示用户
      this.$message({
        message: '恭喜你，操作成功！',
        type: 'success'
      })
    },
    // 关闭弹窗
    close() {
      this.$emit('update:dialogVisible', false)
      // 清空校验
      this.$refs.form.resetFields()
      this.formDate = {}
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
